<script setup>
import { ref, reactive, watch, computed } from "vue"
import { queryRepairTaskByApp, recordRepairResultsAndNotes } from "@/api/Base/fix"
import RepairItem from "@/components/RepaireItem.vue"
import { format, subMonths, addDays, parse } from 'date-fns';

// 状态初始化
const fixObj = reactive({
  search: {
    searchText: "",
    startTime: format(subMonths(new Date(), 3), "yyyy-MM-dd"),
    endTime: format(new Date(), "yyyy-MM-dd"),
    active: 0
  },
  model: {
    feedback: {
      show: false,
      message: ""
    },
    startTime: {
      show: false,
    },
    endTime: {
      show: false,
    }
  },
  list: [],
  pageSize: 20
})

function changeState(state) {
  recordRepairResultsAndNotes({
    "result":2,
    "repairId": "33",
    "fileListFileId": []
  })
}

// 计算属性优化
const filteredList = computed(() => {
  return fixObj.list.filter(item => {
    if (fixObj.search.active === 0) return true
    return item.status === fixObj.search.active
  })
})

// 数据加载方法
const loadData = async () => {
  const params = {
    page: 1,
    pageSize: fixObj.pageSize,
    startTime: fixObj.search.startTime,
    endTime: format(addDays(parse(fixObj.search.endTime, "yyyy-MM-dd", new Date()), 1), "yyyy-MM-dd"),
    searchKeyword: fixObj.search.searchText,
    status: fixObj.search.active
  }

  const res = await queryRepairTaskByApp(params)
  if (res.code === 0) {
    fixObj.list = res.data.list
  }
}

onMounted(() => {
  loadData()
})

// 监听器优化
watch(
  () => fixObj.search,
  () => {
    loadData()
  },
  { deep: true }
)
function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}

</script>

<template>
  <VanNavBar :fixed="true" clickable left-arrow @click-left="onBack">
    <template #title>
      <div class="flex flex-row gap-8">
        <van-search class="search" shape="round" v-model="fixObj.search.searchText" placeholder="登记号/公司/设备名称/SN" />
      </div>
    </template>
    <template #right>
      <div class="flex gap-[20px] items-center">
        <van-image @click="scan" width="16" height="16" src="/productManager/扫码.png" />
        <van-image @click="scan" width="16" height="16" src="/productManager/添加.png" />
      </div>
    </template>
  </VanNavBar>

  <van-tabs class="bg-#f2f4f8 mt-[43px]" v-model:active="fixObj.search.active">
    <div class="p-10px flex flex-row gap-20 bg-white rounded-[10px] m-10">
        <h1 @click="fixObj.model.startTime.show = true" class="text-15px">开始时间:{{ fixObj.search.startTime }}</h1>
        <h1 @click="fixObj.model.endTime.show = true" class="text-15px">结束时间:{{ fixObj.search.endTime }}</h1>
      </div>
      <van-popup v-model:show="fixObj.model.startTime.show" position="bottom">
        <van-date-picker :model-value="fixObj.search.startTime.split('-')" @confirm="({ selectedValues }) => {
          fixObj.search.startTime = selectedValues.join('-');
          fixObj.model.startTime.show = false
        }" @cancel="fixObj.model.startTime.show = false" />
      </van-popup>
      <van-popup v-model:show="fixObj.model.endTime.show" position="bottom">
        <van-date-picker :model-value="fixObj.search.endTime.split('-')" @confirm="({ selectedValues }) => {
          fixObj.search.endTime = selectedValues.join('-');
          fixObj.model.endTime.show = false
        }" @cancel="fixObj.model.endTime.show = false" />
      </van-popup>
    <van-tab v-for="tab in ['全部', '待维修', '维修中','已完成', '未修复']" :key="tab" :title="tab"
      class="m-[10px] w-[100vw] flex flex-col gap-[10px]">
      <RepairItem v-model:reload="loadData" v-for="item in filteredList" :key="item.preregisterNumber" :item="item"
        :show-actions="tab === '全部' || tab === '维修中'" />
    </van-tab>
  </van-tabs>

  <!-- 反馈弹窗保持原样 -->
</template>

<style lang="less" scoped>
.search {
  height: 2rem;
  border-radius: 5px;
  background: #FFFFFF;
}
</style>
